<template>
    <div class="page-container">
        <div class="echarts-container" ref="main"></div>
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    watch: {
        themeStatus() {
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        window.addEventListener('resize', this.screen)
        this.screen()
    },


    destroyed() {
        window.removeEventListener('reset', this.screen)
    },


    methods: {
        // 适配屏幕
        screen() {
            this.myEcharts.resize()
            // 计算一个文字的大小比例
            let width = this.$refs.main.offsetWidth
            let num = width / 100 * 6
            let options = {
                title: {
                    textStyle: {//设置主体样式
                        fontSize: num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },


        // 初始化图标
        initEcharts() {
            let main = this.$refs.main
            // 初始化echarts
            this.myEcharts = this.$echarts.init(main,this.themeStatus)
            let options = { //设置图标的样式和属性
                title: { //主标题
                    text: '全国种植每月收成情况',
                    left: 5,
                    top: 5
                },
                grid: {
                    left: '13%',
                    right: '10%',
                    top: '18%',
                    bottom: '10%'
                },
                tooltip: {
                    show: true,
                },
                xAxis: {
                    show: true,
                    type: 'category',
                    axisLine: {
                        show: true
                    },
                },
                toolbox: {//工具箱
                    show: true,
                    feature: {
                        saveAsImage: {//保存图片
                            type: 'png'
                        },
                        dataView: {
                            show: true,
                        },
                    },

                },
                axisPointer: {
                    show: true
                },
                yAxis: {
                    show: true,
                    type: 'value'

                    // data:dataClass
                },
                series: [
                    {
                        type: 'bar',
                        // data:dataArea,
                        label: { //定义显示数据
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {//设置图标颜色
                            opacity: 0.8, // 设置柱状的透明度
                            borderRadius: [35, 35, 0, 0],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x1: 0,
                                y1: 1,
                                // 渐变
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#0f3357'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bfe5'
                                    }
                                ]
                            }

                        }
                    }],
            }
            // 绘制图标
            this.myEcharts.setOption(options)
        },


        // 获取数据
        async getData() {
            let dataList = await this.$http('/api/plantingHarvest')
            console.log(dataList.data);
            let nameData = dataList.data.map(item => {
                return item.harvest
            })
            let timeData = dataList.data.map(item => {
                return item.month
            })
            this.setEcharts(nameData, timeData)
            console.log(nameData, timeData);
        },



        // 绘制图标
        setEcharts(nameData, timeData) {
            let options = {
                xAxis: {
                    data: timeData
                },
                series: [
                    {
                        data: nameData
                    }
                ]
            }
            this.myEcharts.setOption(options)
        }
    }
}
</script>
    
    
<style scoped></style>